<template>
	<view class="st-customize-footer">
		<view class="st-customize-tabbar">
			<view class="tabbar-list">
				<view v-for="(item,index) in tabBarsList" :key="index" class="tabbar-item" @click="navTo(index,item)">
					<!-- <image class="img" :src="item.m_ico1" mode="aspectFill" v-if="tabIndex == index"></image> -->
					<view class="img" v-if="tabIndex == index" :style="{ backgroundImage: 'url(' +item.m_ico1 + ')'}"></view>
					<view class="img" v-else :style="{backgroundImage: 'url(' +item.m_ico2 + ')'}"></view>
					<view class="text" :style="{color: tabIndex == index ? item.font_color1 : item.font_color2}">{{item.m_title}}</view>
				</view>
			</view>
		</view>
		
		<uni-popup ref="popup" type="bottom">
			<view class="contact-wrapper">
				<view class="contact-group">
					<block v-for="(item, index) in linkTel" :key="index">
						<view class="contact-group__item" @click="onTapCall(item)">{{item}}</view>
					</block>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import uniPopup from "./uni-popup/uni-popup.vue"
	import {adsPath,adsClientNo} from '@/utils/ads.js'
	export default {
		components: {
			uniPopup
		},
		data() {
			return {
				tabBarsList:[],
				tabIndex: 0, //自定义底部导航选中项
				linkTel:[],
				wechaCorpId:'',
				wechaCorpurl:'',
			};
		},
		mounted() {
			this.getTabBarConfig()
		},
		created() {
			// 隐藏底部导航
			uni.hideTabBar();
			
			// 获取微信客服信息
			this.wechaCorpurl = uni.getStorageSync('cfg_m_wap_link');
			this.wechaCorpId = uni.getStorageSync('cfg_m_wap_en_id');
		},
		methods:{
			
			// 底部导航
			async getTabBarConfig(){
				let client_no = adsClientNo(),
					params = {
						method: "api/v2/index/foot_menu",
						client_no: client_no
					}
				
				let pages = getCurrentPages();
				let page = pages[pages.length - 1].$page.fullPath;  //完整路由地址
				let infoRes = await this.$http(params);
				if(infoRes.status){
					this.tabBarsList = infoRes.data.list;
					this.tabBarsList.forEach((item, index) => {
						if(page === item.m_url){
							this.tabIndex = index
						}
						
					});
				}
			},
			
			navTo(index,item){
		
				//跳转首页或个人中心
				if(index == 0 || this.tabBarsList.length-1){
					uni.switchTab({
					    url: item.m_url
					})
				}
				
				//其他跳转
				if(item.type == 1 || item.type == 2 || item.type == 3 || item.type == 4){
					adsPath(item.type, item.m_typeid, item.product_id, item.m_url, item.m_title,item.is_nested);
				}
				
				//电话客服
				if(item.type == 5){
					let mobile = uni.getStorageSync('cfg_m_phone');
					this.linkTel = mobile.split(',');
					this.$refs.popup.open();
				}
				
				//微信客服
				if(item.type == 6){
					
					if( this.wechaCorpurl && this.wechaCorpId ){
						
						//企业微信客服
						// #ifdef MP-WEIXIN
						wx.openCustomerServiceChat({
							extInfo: {
								url: this.wechaCorpurl,
							},
							corpId: this.wechaCorpId,
							success(res) {}
						});
						// #endif
						
						// #ifdef H5
						window.location.href = this.wechaCorpurl
						// #endif
						
					}else{
						uni.showToast({
							title:'参数错误',
							icon:'none'
						})
					}
				}
							
			},
			
			// 拨打电话
			onTapCall(item){
				uni.makePhoneCall({
					phoneNumber: item,
					complete: () => {
						this.$refs.popup.close();
					}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.st-customize-footer{
		height: 180rpx;
	}	
	.st-customize-tabbar{
		padding: 24rpx 44rpx 46rpx;
		height: 110rpx;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		margin:0 auto;
		z-index: 98;
		.tabbar-list{
			padding: 0 20rpx;
			height: 110rpx;
			display: flex;
			justify-content: space-around;
			box-sizing: border-box;
			overflow: hidden;
			border-radius: 55rpx;
			background-color: $uni-bg-color;
			box-shadow: 0 8rpx 20rpx 0 rgba(0,0,0,0.15);
			.tabbar-item{
				width: 25%;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				.img{
					display: block;
					width: 48rpx;
					height: 48rpx;
					margin: 0 auto;
					background-size: contain;
					background-repeat: no-repeat;
				}
				.text{
					font-size: 22rpx;
					margin-top: 6rpx;
					@extend .ellipse
				}
			}
		}
	}
	.contact-wrapper {
		border-radius: 24rpx 24rpx 0 0;
		background-color: $uni-bg-color
	}
	
	.contact-group {
		&__item {
			padding: 28rpx 0;
			position: relative;
			color: #333;
			font-size: $uni-font-size-lg;
			text-align: center;
			font-family: Arial, Helvetica, sans-serif;
	
			&:after {
				@include line
			}
		}
		&__btn {
			padding: 6rpx 0;
			font-size: $uni-font-size-lg !important;
			background-color: $uni-bg-color !important;
		}
	}
</style>
